<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex布局</title>
		<style>
			.bigbox{
				/* 设置为弹性布局flex */
				display: flex;
				/* 决定主轴方向：
				 1.row：默认值，水平方向，从左往右
				 2.row-reverse：水平方向，从右往左
				 3.column：垂直，从上往下
				 4.column-reverse：垂直，从下往上
				 */
				flex-direction: row;
				/* 决定主轴换行：
				 1.nowarp：不换行
				 2.warp:换行
				 3.wrap-reverse:换行且反转
				 */
				/* flex-wrap:wrap-reverse; */
				/* 复合写法 */
				flex-flow: row wrap;
				/* 项目在主轴的排列：justify-content
				 1.flex-start：从主轴的开始位置排，默认值
				 2.flex-end：从主轴的结束位置排
				 3.center：在主轴上剧中
				 4.space-between:两端对齐*/
				justify-content: space-between;
				width: 1300px;
				height: 600px;
				border: 1px solid gray;
				margin: auto;
			}
			.bigbox div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				font-size: 34px;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="bigbox">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>
